﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="layui/css/layui.css" />
		<title>用户管理</title>
	</head>
	<style type="text/css">
		.user-top {
		
			margin: 20px 20px 20px 20px;
		}
		
		.user-top div {
	
		}
	</style>

	<body>

		<blockquote class="site-text layui-elem-quote">
			<h3>用户列表管理</h3>
		</blockquote>
		<div class="user-top">
			<div class="layui-row">
				<div class="layui-col-md5">
					<a href="#" class="layui-btn layui-btn-sm addUser">添加用户</a>
					<a href="#" class="layui-btn layui-btn-sm layui-btn-danger">批量删除</a>
					<a href="#" class="layui-btn layui-btn-sm">下载导入模板</a>
					<a href="#" class="layui-btn layui-btn-sm">导入</a>
					<a href="#" class="layui-btn layui-btn-sm">导出</a>
				</div>
				<div class="layui-col-md6">
					<label>账号：</label>
					<div class="layui-input-inline">
						<input type="text" name="account" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input" id="account">
					</div>
					<label>姓名：</label>
					<div class="layui-input-inline">
						<input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input" id="name">
					</div>
					<label>手机号码：</label>
					<div class="layui-input-inline">
						<input type="text" name="name" required lay-verify="required" placeholder="请输入手机号码" autocomplete="off" class="layui-input" id="phone">
					</div>

					<a href="javascript:void;" class="layui-btn layui-btn-sm">新增</a>
				</div>
			</div>

			<form class="layui-form" action="javascript:void;">
				<table class="layui-table" lay-size="sm" id="usertable">
					<colgroup>
						<col width="50">
						<col width="100">
						<col width="100">
						<col width="100">
						<col width="100">
						<col width="100">
						<col width="100">
						<col width="180">
					</colgroup>
					<thead>
						<tr>
							<th><input type="checkbox" lay-skin="primary"></th>
							<th>账号</th>
							<th>姓名</th>
							<th>手机号码</th>
							<th>籍贯</th>
							<th>出生日期</th>
							<th>账号是否启用</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
					</tbody>
				</table>
			</form>

			<div class="list_footer">
				<div class="layui-box layui-laypage layui-laypage-default">
					<a class="layui-laypage-prev layui-disabled">
						<</a>
							<span class="layui-laypage-curr">
							<em class="layui-laypage-em"></em>
							<em>1</em>
						</span>
							<a class="layui-laypage-prev layui-disabled">></a>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="layui/layui.js"></script>
		<script type="text/javascript">
			layui.use("form", function() {
				var form = layui.form;
				form.render();

				function add() {
					var account = $("#account").val();
					var name = $("#name").val();
					var qq = $("#phone").val();
					var tr = $("<tr></tr>");
					var td1 = $("<td></td>").append("<input type='checkbox' lay-skin='primary'>");
					var td2 = $("<td></td>").append(account);
					var td3 = $("<td></td>").append(name);
					var td4 = $("<td></td>").append(qq);
					var td5 = $("<td></td>").append();
					var td6 = $("<td></td>").append();
					var td7 = $("<td></td>").append("<input type='checkbox' lay-skin='primary'>");
					var td8 = $("<td></td>").append("<a href='#' class='update layui-btn layui-btn-sm layui-btn-danger'>编辑</a>")
					.append("<a href='#' class=' delet layui-btn layui-btn-sm layui-btn-danger'>删除</a>");
					tr.append(td1).append(td2).append(td3).append(td4).append(td5).append(td6).append(td7).append(td8).appendTo($("#tbody"));
					form.render();
				};

				$(".addUser").click(function() {

					add();
				});

			});
			
			select();

			function select() {
				var lists = {
					"list": [{
						"account": "zhangshan",
						"name": "李排元",
						"mobile": 11453009,
						"address": "1005",
						"birthday": "1998.1.1"

					}, {
						"account": "11411",
						"name": "1145",
						"mobile": 2133123,
						"address": "123123",
						"birthday": "145.11.1"

					}, {
						"account": "24422",
						"name": "62",
						"mobile": 123423,
						"address": "22522222",
						"birthday": "9955.99.9"
					}]
				};
				var list = lists.list;
				$.each(list,function(index,item){
					
					 var tr = $("<tr></tr>");
					var td1 = $("<td></td>").append("<input type='checkbox' lay-skin='primary'>");
					var td2 = $("<td></td>").append(item.account);
					var td3 = $("<td></td>").append(item.name);
					var td4 = $("<td></td>").append(item.mobile);
					var td5 = $("<td></td>").append(item.Address);
					var td6 = $("<td></td>").append(item.birthday);
					var td7 = $("<td></td>").append("<input type='checkbox' lay-skin='primary'>");
					var td8 = $("<td></td>").append("<a href='#' class='update layui-btn layui-btn-sm layui-btn-danger'>编辑</a>")
					.append("<a href='#' class=' delet layui-btn layui-btn-sm layui-btn-danger'>删除</a>");
					tr.append(td1).append(td2).append(td3).append(td4).append(td5).append(td6).append(td7).append(td8).appendTo($("#tbody"));
	
				});
		
			};
			$(document).on("click",".delet",function(){
				$(this).parent().parent().remove();
			});
			$(document).on("click",".update",function(){
					var account = $("#account").val();
					var name = $("#name").val();
					var qq = $("#phone").val();
				$(this).parent().parent().children().eq(1).text(account);
				$(this).parent().parent().children().eq(2).text(name);
				$(this).parent().parent().children().eq(3).text(qq);
			});
			
		</script>
	</body>

</html>